<template>
    <div class="subscribe" v-if="show_show">
        <div id="content" class="louie-selector" :class="subscribe_class">
            <h2>是否开启审核提醒<i class="iconfont icon-guanbi close" @click="toggle(false)"></i></h2>
            <div class="buttons">
                <wx-open-subscribe
                        :template="template_id"
                        id="wx-open-subscribe"
                        @success="subSuccess"
                >
                    <script type="text/wxtag-template" slot="style">
                        <style>
                            .subscribe-btn {
                                color: #fff;
                                background-color: #FACC3C;
                                width: 100%;
                                height: 40px;
                                border: none;
                                -webkit-tap-highlight-color: rgba(0,0,0,0);
                            }
                        </style>
                    </script>
                    <script type="text/wxtag-template">
                        <button class="subscribe-btn">
                            开启
                        </button>
                    </script>
                </wx-open-subscribe>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "subscribe",
    data () {
      return {
          // 显示状态
          show_show: false,
          // 素材库class
          subscribe_class: 'close'
      }
    },
    props: {
        is_show: {
            type: Number || Boolean
        },
        // 订阅消息模板id
        template_id: {
            default: ''
        }
    },
    watch: {
        // 组件显示状态
        is_show() {
            this.toggle(true)
        }
    },
    mounted() {
        this.toggle(true)
    },
    methods: {
        /**
         * 显示隐藏本组件
         */
        toggle(is_show) {
            if(is_show) {
                this.show_show = true
                setTimeout(() => {
                    this.subscribe_class = 'show'
                },100)
            } else {
                this.subscribe_class = 'close'
                setTimeout(() => {
                    this.show_show = false
                },200)
            }
        },
        subSuccess() {
            this.toggle(false)
        }
    }
}
</script>

<style scoped lang="less" src="./subscribe.less"></style>